<template>
  <div>
    <el-table :data="articleData" border style="width: 100%">
      <el-table-column label="封面" width="180" align="center">
        <template #default="scope">
          <el-image style="width: 150px; height: 80px" :src="store.state.BaseUrl + scope.row.bg" fit="cover" />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" show-overflow-tooltip align="center" />
      <el-table-column prop="articleType" label="分类" show-overflow-tooltip align="center" />
      <el-table-column label="Date" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon>
              <timer />
            </el-icon>
            <span style="margin-left: 10px">{{ dayjs(scope.row.createTime - 0).format('YYYY-MM-DD HH:mm') }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="是否发布" align="center" width="100">
        <template #default="scope">
          <el-tag class="mx-1" :type="scope.row.articleType != '草稿' ? 'success' : 'danger'" effect="light">
            {{ scope.row.articleType != '草稿' ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template #default="scope">
          <el-button type="primary" :icon="Edit" circle @click="handeEdit(scope.row)">
          </el-button>
          <el-popconfirm title="确定删除吗?" @confirm="handleDelClick(scope.$index, scope.row)">
            <template #reference>
              <el-button size="small" circle :icon="Delete" type="danger"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination @current-change="handleChangePage" :hide-on-single-page="Number(count) < 4" :total="Number(count)"
        :page-size="4" layout="prev, pager, next" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import { defineProps, inject, defineEmits } from 'vue'
import { Timer } from '@element-plus/icons-vue'
import { Delete, Edit, } from '@element-plus/icons-vue'

import { useRouter } from 'vue-router'

import { deleteArticle } from '@/utils/articleHttp'
import { ElMessage } from 'element-plus'
const store: any = inject('store')
const router = useRouter()
const emits = defineEmits(['changePage', 'updateArctileData'])

const props = defineProps({
  articleData: {
    default: []
  },
  count: {
    default: '0'
  }
})
type row = {
  _id: string,
  info: string,
  articleType: string
}
// 编辑按钮
const handeEdit = (row: row) => {
  // 跳转到发布界面
  router.push({ name: 'article-push', query: { id: row._id } })
}

// 删除按钮
const handleDelClick = (index: number, row: row) => {
  // 改为post
  const imgReg = /<img.*?(?:>|\/>)/gi
  // 匹配src属性
  const srcReg = /src=[\\"]?([^\\"]*)[\\"]?/i
  const arr = row.info.match(imgReg)
  const imgs = []
  if (arr && arr.length) {
    for (let i = 0; i < arr.length; i++) {
      const src = (arr[i].match(srcReg) as string[])[1];
      imgs.push(src.split('ArticleUploads/')[1])
    }
  }
  deleteArticle(row._id, imgs).then(res => {
    if (res.data.ok) {
      store.subtractLableArticle(row.articleType)
      emits('updateArctileData')
      ElMessage.success(res.data.info)
    } else {
      ElMessage.error(res.data.info)
    }
  })
}

// 分页切换
const handleChangePage = (page: number): void => {
  emits('changePage', page)
}
</script>
<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
}
</style>
